<template>
    <div class="member-continal">
        <div class="header">
            <img src="http://img4.imgtn.bdimg.com/it/u=3276179142,1686381254&fm=26&gp=0.jpg" alt="">
            <div v-if="!flag"  class="name">
                <router-link to="/member/reg">注册</router-link> / 
                <router-link to="/member/login">登录</router-link> 
            </div>
            <div v-else class="name">用户名</div>
        </div>
        <div class="footer">
            <mt-button v-show="flag" type="default" size="large" @click="logout">退出登录</mt-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                flag: this.$store.getters.isLogin
            }
        },
        created() {
            if(this.flag) {
                console.log('ok')
            }else {
                this.$messagebox({
                    title: '提示',
                    message: '<p>您还未登录，是否去登录？<p>',
                    showCancelButton: true
                }).then( action => {
                    if(action == 'confirm') {
                        this.$router.push('/member/login')
                    }
                })
            }
        },
        methods: {
            logout() {
                this.$store.dispatch('logOut')
            }
        },
        watch: {
            "$store.getters.isLogin": function(newVal) {
                if(newVal) {
                    this.flag = true
                }else{
                    this.flag = false
                    this.$toast('退出成功')
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
.member-continal{
    width: 100%;
    .header{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding: 20px;
        background: linear-gradient(#26a2ff,#7fbeed);
        img{
            display: block;
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
        .name{
            padding-left: 15px;
            padding-top: 10px;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            a{
                color: #fff;
            }
        }
    }
}
</style>